<template>
  <div class="visitor-toVisit">
    <div class="search-group">
      <div class="input-wrap">
        <div class="label">餐厅名称:</div>
        <div class="input-item">
          <a-input :maxLength="30" clearable v-model="queryParam.restaurantName" placeholder="请输入餐厅名称" />
        </div>
      </div>

      <div class="input-wrap">
        <div class="label">企业营业执照名称:</div>
        <div class="input-item">
          <a-input :maxLength="30" clearable v-model="queryParam.businessName" placeholder="请输入企业营业执照名称" />
        </div>
      </div>

      <div class="input-wrap">
        <div class="label">信用代码:</div>
        <div class="input-item">
          <a-input :maxLength="30" clearable v-model="queryParam.creditCode" placeholder="请输入信用代码" />
        </div>
      </div>

      <div class="input-wrap">
        <div class="label">餐厅规模:</div>
        <div class="input-item">
          <a-select ref="select" allowClear v-model="queryParam.scale" placeholder="请选择餐厅规模">
            <a-select-option value="1">小型</a-select-option>
            <a-select-option value="2">中型</a-select-option>
            <a-select-option value="3">大型</a-select-option>
          </a-select>
        </div>
      </div>

      <div class="input-wrap">
        <div class="label">提交时间:</div>
        <div class="time-item">
          <start-end-time
            :times="times"
            :showTime="{ format: 'HH:mm:ss' }"
            format="YYYY-MM-DD HH:mm:ss"
            @timeChange="timeChange"
            :resetTime="resetTime"
          ></start-end-time>
        </div>
      </div>

      <div class="input-wrap">
        <div class="label">餐厅负责人姓名:</div>
        <div class="input-item">
          <a-input :maxLength="30" v-model="queryParam.chargeName" placeholder="请输入餐厅负责人姓名" />
        </div>
      </div>

      <div class="input-wrap">
        <div class="label">责任人电话:</div>
        <div class="input-item">
          <a-input :maxLength="11" v-model="queryParam.chargePhone" placeholder="请输入责任人电话" />
        </div>
      </div>

      <div class="btn-wrap">
        <a-button class="searchBtn" @click="searchQuery(queryParam.startTime, queryParam.endTime)" type="primary">
          搜索
        </a-button>
        <a-button class="resetBtn" @click="searchReset()" type="primary">重置</a-button>
      </div>
    </div>

    <div class="flex table-wrap">
      <a-table
        rowKey="id"
        class="tableList f1"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :customRow="customRow"
        @change="handleTableChange"
      >
        <template v-slot:action="records">
          <span class="operation deatil-color" @click="detailHandle(records)">详情</span>
        </template>
      </a-table>
      <detail-modal v-if="detailFlag" @cancel="cancel" @handleOk="handleOk" :record.sync="records"></detail-modal>
    </div>
  </div>
</template>
<script>
import startEndTime from '@/components/startEndTime'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import detailModal from './component/detail'
import { mapState } from 'vuex'
export default {
  components: { detailModal, startEndTime },
  mixins: [JeecgListMixin],
  computed: {
    ...mapState({
      isAgencyId: (state) => state.user.isAgencyId,
    }),
  },
  watch: {
    isAgencyId(v) {
      this.queryParam.unitId = v.id ? v.id : ''
      this.searchQuery()
      this.detailFlag = false
    },
  },
  data() {
    return {
      url: {
        list: '/restaurant/audit_page?auditStatus=1',
        tree: true,
      },
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '餐厅名称',
          dataIndex: 'restaurantName',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '企业营业执照',
          dataIndex: 'businessName',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '信用代码',
          dataIndex: 'creditCode',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '监管单位',
          dataIndex: 'unitId_dictText',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '提交时间',
          dataIndex: 'createTime',
          ellipsis: true,
          align: 'center',
        },
        {
          title: '操作',
          width: 100,
          scopedSlots: { customRender: 'action' },
        },
      ],
      records: {},
      detailFlag: false,
    }
  },
  mounted() {},
  methods: {
    timeChange(v, index) {
      if (index == 1) {
        this.queryParam.startTime = this.$moment(v).valueOf()
      } else {
        this.queryParam.endTime = this.$moment(v).valueOf()
      }
      if (v == null) {
        this.queryParam.startTime = null
        this.queryParam.endTime = null
      }
    },
    customRow(record, index) {
      let _this = this
      return {
        on: {
          click: (event) => {
            // 鼠标单击行
            _this.detailFlag = true
            _this.records = record

            const oldList = document.querySelectorAll('.checked-td-of-add-table')
            if (oldList) {
              for (let j = 0; j < oldList.length; j++) {
                oldList[j].classList.remove('checked-td-of-add-table')
              }
            }

            const children = event.target.parentNode.children
            for (let i = 0; i < children.length; i++) {
              children[i].classList.add('checked-td-of-add-table')
            }
          },
        },
      }
    },
    cancel() {
      this.detailFlag = false
      this.searchQuery()
    },
    handleOk() {
      this.detailFlag = false
      this.searchQuery()
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .checked-td-of-add-table {
  background-color: rgba(12, 183, 188, 0.5);
}
</style>
